import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd-v4';
import classNames from 'classnames';
import BaseMenu from './BaseMenu';
import MenuCounter from './Counter';
import './index.less';
var Sider = Layout.Sider;
export var defaultRenderLogo = function defaultRenderLogo(logo) {
  if (typeof logo === 'string') {
    return _jsx("img", {
      src: logo,
      alt: "logo"
    });
  }

  if (typeof logo === 'function') {
    return logo();
  }

  return logo;
};
export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props) {
  var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
  var logo = props.logo,
      title = props.title,
      layout = props.layout;
  var renderFunction = props[renderKey || ''];

  if (renderFunction === false) {
    return null;
  }

  var logoDom = defaultRenderLogo(logo);

  var titleDom = _jsx("h1", {
    children: title !== null && title !== void 0 ? title : 'Ant Design Pro'
  });

  if (renderFunction) {
    // when collapsed, no render title
    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
  }

  if (layout === 'mix' && renderKey === 'menuHeaderRender') {
    return null;
  }

  return _jsxs("a", {
    children: [logoDom, props.collapsed ? null : titleDom]
  });
};
export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
  return collapsed ? _jsx(MenuUnfoldOutlined, {}) : _jsx(MenuFoldOutlined, {});
};

var SiderMenu = function SiderMenu(props) {
  var _classNames;

  var collapsed = props.collapsed,
      fixSiderbar = props.fixSiderbar,
      menuFooterRender = props.menuFooterRender,
      _onCollapse = props.onCollapse,
      theme = props.theme,
      siderWidth = props.siderWidth,
      isMobile = props.isMobile,
      onMenuHeaderClick = props.onMenuHeaderClick,
      _props$breakpoint = props.breakpoint,
      breakpoint = _props$breakpoint === void 0 ? 'lg' : _props$breakpoint,
      style = props.style,
      layout = props.layout,
      _props$menuExtraRende = props.menuExtraRender,
      menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
      _props$collapsedButto = props.collapsedButtonRender,
      collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
      links = props.links,
      menuContentRender = props.menuContentRender,
      prefixCls = props.prefixCls,
      onOpenChange = props.onOpenChange,
      headerHeight = props.headerHeight,
      logoStyle = props.logoStyle;
  var baseClassName = "".concat(prefixCls, "-sider");

  var _MenuCounter$useConta = MenuCounter.useContainer(),
      flatMenuKeys = _MenuCounter$useConta.flatMenuKeys;

  var siderClassName = classNames("".concat(baseClassName), (_classNames = {}, _defineProperty(_classNames, "".concat(baseClassName, "-fixed"), fixSiderbar), _defineProperty(_classNames, "".concat(baseClassName, "-layout-").concat(layout), layout && !isMobile), _defineProperty(_classNames, "".concat(baseClassName, "-light"), theme !== 'dark'), _classNames));
  var headerDom = defaultRenderLogoAndTitle(props);
  var extraDom = menuExtraRender && menuExtraRender(props);

  var menuDom = menuContentRender !== false && flatMenuKeys && /*#__PURE__*/_createElement(BaseMenu, _objectSpread(_objectSpread({}, props), {}, {
    key: "base-menu",
    mode: "inline",
    handleOpenChange: onOpenChange,
    style: {
      width: '100%'
    },
    className: "".concat(baseClassName, "-menu")
  }));

  var menuRenderDom = menuContentRender ? menuContentRender(props, menuDom) : menuDom;
  var linksMenuItems = (links || []).map(function (node, index) {
    return {
      className: "".concat(baseClassName, "-link"),
      label: node,
      key: index
    };
  });

  if (collapsedButtonRender && !isMobile) {
    linksMenuItems.push({
      className: "".concat(baseClassName, "-collapsed-button"),
      //@ts-ignore
      title: false,
      key: 'collapsed',
      onClick: function onClick() {
        if (_onCollapse) {
          _onCollapse(!collapsed);
        }
      },
      label: collapsedButtonRender(collapsed)
    });
  }

  return _jsxs(_Fragment, {
    children: [fixSiderbar && _jsx("div", {
      style: _objectSpread({
        width: collapsed ? 48 : siderWidth,
        overflow: 'hidden',
        flex: "0 0 ".concat(collapsed ? 48 : siderWidth, "px"),
        maxWidth: collapsed ? 48 : siderWidth,
        minWidth: collapsed ? 48 : siderWidth,
        transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
      }, style)
    }), _jsxs(Sider, {
      collapsible: true,
      trigger: null,
      collapsed: collapsed,
      breakpoint: breakpoint === false ? undefined : breakpoint,
      onCollapse: function onCollapse(collapse) {
        if (isMobile) return;
        _onCollapse === null || _onCollapse === void 0 ? void 0 : _onCollapse(collapse);
      },
      collapsedWidth: 48,
      style: _objectSpread({
        overflow: 'hidden',
        paddingTop: layout === 'mix' && !isMobile ? headerHeight : undefined
      }, style),
      width: siderWidth,
      theme: theme,
      className: siderClassName,
      children: [headerDom && _jsx("div", {
        className: classNames("".concat(baseClassName, "-logo"), _defineProperty({}, "".concat(baseClassName, "-collapsed"), collapsed)),
        onClick: layout !== 'mix' ? onMenuHeaderClick : undefined,
        id: "logo",
        style: logoStyle,
        children: headerDom
      }), extraDom && _jsx("div", {
        className: "".concat(baseClassName, "-extra ").concat(!headerDom && "".concat(baseClassName, "-extra-no-logo")),
        children: extraDom
      }), _jsx("div", {
        style: {
          flex: 1,
          overflowY: 'auto',
          overflowX: 'hidden'
        },
        children: menuRenderDom
      }), _jsx("div", {
        className: "".concat(baseClassName, "-links"),
        children: _jsx(Menu, {
          theme: theme,
          inlineIndent: 16,
          className: "".concat(baseClassName, "-link-menu"),
          selectedKeys: [],
          openKeys: [],
          mode: "inline",
          items: linksMenuItems
        })
      }), menuFooterRender && _jsx("div", {
        className: classNames("".concat(baseClassName, "-footer"), _defineProperty({}, "".concat(baseClassName, "-footer-collapsed"), !collapsed)),
        children: menuFooterRender(props)
      })]
    })]
  });
};

export default SiderMenu;